<template>
	<view class="content">
		<view class="top">
			<view class="top-input">
				<view style="margin-right:5rpx;">
					<u-icon name="search" size="24" color="#F582AE"></u-icon>
				</view>
				<input @input="inputChange" type="text" placeholder="请输入课程名称" v-model="queryParam.courseName">
			</view>
			<view @click="sortByTime" class="sort">
				<image src="../../static/images/sort-amount-down.svg" mode=""></image>
			</view>
		</view>
		<view class="bottom">
			<view @click="toAddCourse" v-if="!queryParam.courseName" class="box box-first">
				<view class="box-first-inner">
					<u-icon name="plus" size="24" color="#F582AE"></u-icon>
					<view>添加课程</view>
				</view>
			</view>
			<view @click="toDetail(item)" @longpress="selectCourse(item)" class="box" v-for="(item,index) in list" :key="index">
				<view class="course-cover">
					<view class="tag">
						{{"共" + item.chapterNum +"章"}}
					</view>
					<image :src="item.courseCoverColor" mode="aspectFill"></image>
				</view>
				<view>{{item.courseName}}</view>
			</view>
		</view>
		<tabbar></tabbar>


		<!-- 长按课程的操作菜单，包含删除课程，修改课程两个操作 -->
		<u-action-sheet @close="isActionShow = false" :actions="actionList" @select="selectAction" :title="操作"
			:show="isActionShow" cancelText="取消" safeAreaInsetBottom round="10"></u-action-sheet>


		<!-- 模态框 -->
		<u-modal @confirm="confirmDel" @cancel="isModalShow = false" :show="isModalShow" title="是否删除" content='是否删除选中课程'
			showCancelButton></u-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		getCourseList,
		delCourse,
		editCourse
	} from "@/utils/api.js"
	import {
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import qs from "qs";


	onShow(() => { //onShow重新加载一次列表
		uni.hideTabBar()
		queryParam.pageNum = 1
		queryParam.pageSize = 10
		queryParam.total = 0
		list.value = []
		toGetList()
	})


	//uniapp页面触底事件
	onReachBottom(() => {
		console.log(queryParam.pageNum * queryParam.pageSize >= queryParam.total);
		if (queryParam.pageNum * queryParam.pageSize >= queryParam.total) {
			console.log("111");
			uni.showToast({
				title: "已经到底啦",
				icon: 'none'
			})
			return
		}
		queryParam.pageNum += 1
		toGetList()
	})


	const list = ref([]) //商户列表

	const queryParam = reactive({
		pageNum: 1,
		pageSize: 10,
		total: 0,
		courseName: "" //课程名称
	}) //查询参数


	function toSelect(id) {
		uni.navigateTo({
			url: "/pages/select/select?chapterId=" + id
		})
	}

	async function toGetList() {
		let res = await getCourseList(qs.stringify({
			...queryParam
		}))

		queryParam.total = res.total
		list.value = list.value.concat(res.rows)
		if (queryParam.pageNum * queryParam.pageSize <= queryParam.total) {
			queryParam.pageNum += 1
			toGetList()
		}

	}


	function inputChange() {
		queryParam.pageNum = 1 //清空回到第一页
		queryParam.total = 0
		list.value = []
		toGetList()
	}

	function tabsChange(e) {
		queryParam.pageNum = 1 //清空回到第一页
		queryParam.total = 0
		list.value = []
		toGetList()
	}


	// 退出登录
	function logout() {
		uni.removeStorageSync('token')
		uni.navigateTo({
			url: "../login/login"
		})
	}



	const sortType = ref(true)


	//点击按钮 实现数组排序
	function sortByTime() {
		sortType.value = !sortType.value

		// console.log(sortType.value,"蓬溪县");
		// //true代表正序 false代表倒序
		if (sortType.value) {
			list.value.sort((a, b) => {
				if (a.createTime < b.createTime) {
					return -1;
				} else if (a.createTime == b.createTime) {
					return 0;
				} else {
					return 1;
				}
			})
		} else {
			list.value.sort((a, b) => {
				if (b.createTime < a.createTime) {
					return -1;
				} else if (a.createTime == b.createTime) {
					return 0;
				} else {
					return 1;
				}
			})
		}
	}



	function toAddCourse() {
		uni.navigateTo({
			url: "/pages/add-course/add-course"
		})
	}


	const isActionShow = ref(false)

	const actionList = ref([{
			name: '修改课程'
		},
		{
			name: '删除课程'
		}
	])

	const isModalShow = ref(false) //是否删除模态框


	function selectAction(e) {
		if (e.name == '修改课程') {
			uni.navigateTo({
				url: "/pages/add-course/add-course?courseId=" + currentCourse.value.courseId
			})
		} else {
			isModalShow.value = true
		}
	}


	//模态框点击确认删除
	async function confirmDel() {
		//删除课程
		let res = await delCourse(currentCourse.value.courseId)
		if (res.code == 200) {
			queryParam.pageNum = 1
			queryParam.pageSize = 10
			queryParam.total = 0
			list.value = []
			uni.showToast({
				icon: "success",
				title: "删除成功"
			})
			toGetList()
		}
		isModalShow.value = false
	}


	const currentCourse = ref() //存储当前长按选中的课程



	function selectCourse(item) {
		currentCourse.value = item
		isActionShow.value = true
	}
	
	
	function toDetail(item){
		currentCourse.value = item
		uni.navigateTo({
			url:"/pages/course-detail/course-detail?courseId=" + currentCourse.value.courseId
		})
	}
</script>
<style scoped lang="scss">
	page {
		background-color: #FEF6E4;
		font-size: 4vw;
		padding-bottom: 8vh;
	}

	.bottom {
		margin-top: 3vh;
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.box {
			margin-bottom: 1.5vh;

			.course-cover {
				position: relative;
				width: 300rpx;
				height: 22vh;
				background-color: blue;
				margin-bottom: 1vh;
				border-radius: 16rpx;
				font-weight: 500;

				.tag {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 200;
					background-color: #8BD3DD;
					color: #fff;
					font-size: 20rpx;
					padding: 8rpx 12rpx;
					border-top-left-radius: 16rpx;
					border-bottom-right-radius: 20rpx;
				}

				image {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}

			}
		}

		.box-first {
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			border-width: 10rpx;
			border: 5rpx dotted #F582AE;
			width: 300rpx;
			height: 22vh;
			border-radius: 16rpx;
			background-color: rgba(255, 255, 255, .6);
			border-spacing: 10px;

			.box-first-inner {
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				color: #F582AE;

				view {
					margin-top: 0.5vh;
				}
			}
		}
	}

	.top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 3vh;
		padding: 0 24rpx;

		.top-input {
			display: flex;
			align-items: center;
			width: 80%;
			background-color: #fff;
			border-radius: 28rpx;
			padding: 1vh 20rpx;

			input {
				color: #888;
			}
		}

		.sort {
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 50%;
			width: 60rpx;
			height: 60rpx;
			justify-content: center;

			image {
				width: 38rpx;
				height: 38rpx;
				margin-right: 4rpx;
			}
		}
	}
</style>